<template>
	<div class="protoitem-view-rd">
		<div class="tab-container-item" v-if="itemp == 'xxpl'">
			<div class="pub">
<!-- 				<div class="d-p-action box-row">
					<div class="flex-1">
						<a href="javascript:;" class="action-btn active" @click="pbHandle('pub')">公开资料</a>
					</div>
					<div class="flex-1">
						<a href="javascript:;" class="action-btn" @click="pbHandle('tz')">投资人可见</a>
					</div>
				</div> -->
				<div class="pub-container">
					<div class="pub-container-list">
						<i class="circle"></i>
						<div class="pub-container-title"><i class="icon icon-calender"></i>2019-01-14</div>
						<div class="pub-container-content">
							<div class="pub-container-content-title">
								{{pjd.name}}
							</div>
							<a :href="item.file" class="pdf-url" v-for="item in pjd.attach">{{item.title}}</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="tab-container-item" v-if="itemp == 'detail'"><div v-html="pjd.description"></div></div>
		<div class="tab-container-item" v-if="itemp == 'sel'"><div v-html="pjd.description_5"></div></div>
		<div class="tab-container-item" v-if="itemp == 'ppgs'"><div v-html="pjd.description_8"></div></div>
		<div class="tab-container-item team-js-box" v-if="itemp == 'team'">
			<div class="team-js-item" v-for="item in team">
				<div class="leader-ava"><img :src="item.avatar ? item.avatar : lavatar" alt=""></div>
				<div class="leader-detail">
					<div class="leader-name">{{item.name}}</div>
					<div class="leader-job">{{item.job}}</div>
					<div class="leader-jl"><div v-html="item.describe"></div></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import commonHeader from '__cp/commonHeader';
	import {getPJDetail,getTeamApi} from '__api';
	import store from '@/store/index';
	import previewImg from '__assets/images/preview.jpg';
	import avatar from '__assets/images/avatar.png';
	import defaultAvatar from '__assets/images/default-avatar.png'
	export default{
		name: 'protoitem-view',
		components:{commonHeader},
		created(){
			this.$nextTick(function(){
				this.itemp = this.$route.query.view;
				if(this.itemp == 'team'){
					this.getTeam()
				} else {
					this.getProductData();
				}
			})
		},
		data(){
			const self = this;
			return{
				pjd:{},
				itemp:'',
				team:[],
				lavatar: avatar
			}
		},
		methods:{
			getProductData(){
				this.$loading();
				getPJDetail({id: this.$route.query.id}).then( res => {
					let pjd = res.deal_info;
					let pjstatus = '开放认购中';

					// type :  0 消费众筹  1 股权或不动产
					if(pjd.tpye == 0){
						if(pjd.status == 0){
							pjstatus = '预热中'
						} else {
							if(pjd.percent >= 100){
								pjstatus = '已成功'
								pjd.remain_days = '已成功'
							} else {
								if(pjd.status == 1){
									pjstatus = '已成功'
									pjd.remain_days = '已成功'
								}

								if(pjd.status == 2){
									pjstatus = '失败'
									pjd.remain_days = '失败'
								}

								if(pjd.status == 3){
									pjstatus = '开放认购中'
								}

								if(pjd.status == 4){
									pjstatus = '长期项目'
									pjd.remain_days = '长期项目'
								}
							}
						}
					} else {
						pjstatus = this.statusHandle(pjd.begin_time,pjd.nowtime,pjd.end_time,pjd.type,pjd.is_success)
					}
					
					pjd.avatar = pjd.avatar ? this.BASE_URL + pjd.avatar : defaultAvatar;
					pjd.pjstatus = pjstatus;

					this.pjd = pjd;
					//this.$refs.sticky.bindSticky();
					this.$loading.end();
				})
			},
			getTeam(){
				getTeamApi({id: this.$route.query.id}).then( res => {
					this.team = res.stock_list;
				})
			},
			statusHandle(bt,nt,et,type,is_success){
				nt = nt ? nt : Date.parse(new Date())/1000;
				let r = '开放认购中';
				if(bt>nt){
					r = '预热中';
				}
				else if(et<nt && et != 0){
					if(is_success == 1){
						r = '已成功'
					} else {
						r = '失败'
					}
				} else {
					if( type == 1){
						r = '开放认购中'
					}
				}
				return r;
			}
		}
	};

</script>
<style>
	img{max-width: 100%;}
</style>
<style scoped lang="scss">
.tab-container-item.team-js-box{
	padding: a(60px) a(38px);
}
.team-js-item{
	margin-bottom: a(80px);
	overflow: hidden;
}
.leader-ava{
	width:29.166666%;
	float:left;
	box-sizing: border-box;
	img{
		display: block;
	    width: a(150px);
	    height: a(150px);
	    border-radius: 50%;
	    overflow: hidden;
	    background: #f2f4f6;
	    margin-right: a(40px);
	}
}
.leader-detail{width: 70.5%;float:left;}
.leader-name{
	color:#33353f;
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
}
.leader-job{
	color:#9698a2;
	font-size: 12px;
	line-height: 16px;
}
.leader-jl{
	color:#40424f;
	font-size: 12px;
	line-height: 18px;
	margin-top: 6px;
}
.protoitem-view-rd{background-color: #fff;height:100%;height:100vh;}
	.tab-container-item{
		background-color: #ffffff;
		padding: a(30px);
		overflow: hidden;
		word-break: break-all;
		
	}

	.tab-container{
		background-color: #ffffff;
		.tab-container-item{
			padding: a(30px);
			min-height: a(1000px);
			overflow: hidden;
			word-break: break-all;

			img{max-width: 100%;}
		}
	}
	.d-p-action{
		padding: a(30px) 0;
		text-align:center;
	}
	.action-btn{
		display: inline-block;
		width: 100px;
		height: 30px;
		line-height: 30px;
		font-size: 15px;
		color: #0f2dcd;
	    border: 1px solid #0f2dcd;
	    background: #fff;
	    border-radius: 5px;

	    &.active{background: -webkit-linear-gradient(left top,#3bb5f5,#0f2dcd);color:#fff;border:none;}
	}
	.pub .pub-container {
	    margin-left: a(32px);
	    padding-left: a(32px);
	    padding-right: a(60px);
	    border-left: 2px solid #e5e5e5;
	    box-sizing: border-box;

	    .pub-container-list{
	    	position: relative;
	    }
	    .pub-container-title{
	    	font-size: 12px;
	    	color: #666;
		    padding-bottom: a(30px);
		    position: relative;
	    }
	    .pub-container-content{
	    	padding: a(30px);
		    padding-bottom: a(40px);
		    background: #fff;
		    box-shadow: 0 0 30px 0 rgba(15,45,205,.1);
		    border-radius: a(8px);
	    }
	    .pub-container-content-title{
	    	font-size: 15px;
	    	padding-bottom: a(30px);
	    	color: #000;
	    }
	    .pdf-url{font-size: 14px;line-height: 1.5;display: block
	    }
	    .circle{
	    	position: absolute;
		    background: #0f2dcd;
		    width: a(12px);
		    height: a(12px);
		    display: block;
		    border-radius: 50%;
		    top: 50%;
		    left: a(-40px);
		    margin-top:a(-6px);
	    }
	}
</style>